<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://at.alicdn.com/t/c/font_4481751_zjd77de42z.js"></script>
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <style>
        #box {
            display: block;
            margin: 0 auto;
        }
    </style>
    <link rel="icon" href="/chat/image/favicon.ico" type="image/x-icon">
</head>
<body>
<svg class="emojy-item" aria-hidden="true" id="box">
    <use xlink:href="#icon-box"></use>
</svg>
<form th:action="@{/executeRegister}" method="post" onsubmit="return register()">
    <table style="text-align: center; margin-left: auto; margin-right: auto; margin-top: 20px">
        <tr>
            <td colspan="2">
                <label style="color: red" th:text="${message}"></label> <br>
                <div class="input-group has-validation">
                    <span class="input-group-text">&nbsp;用&nbsp;户&nbsp;名:</span>
                    <div class="form-floating is-invalid">
                        <input type="text" class="form-control" id="username" placeholder="用户名" name="username" required>
                        <label for="username">用户名</label>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div class="input-group has-validation" style="margin-top: 20px">
                    <span class="input-group-text">昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称:</span>
                    <div class="form-floating is-invalid">
                        <input type="text" class="form-control" id="petName" placeholder="昵称" name="petName" required>
                        <label for="password">昵称</label>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div class="input-group has-validation" style="margin-top: 20px">
                    <span class="input-group-text">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:</span>
                    <div class="form-floating is-invalid">
                        <input type="password" class="form-control" id="password" placeholder="密码" name="password" required>
                        <label for="password">密码</label>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div class="input-group has-validation" style="margin-top: 20px">
                    <span class="input-group-text">重复密码</span>
                    <div class="form-floating is-invalid">
                        <input type="password" class="form-control" id="repeatPassword" placeholder="再次输入密码" required>
                        <label for="password">重复密码</label>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div class="col-12" style="margin-top: 20px">
                    <button class="btn btn-primary btn-lg" type="submit">注册账号</button>
                </div>
            </td>
        </tr>
    </table>
</form>
<script>
    function register() {

        let password = document.querySelector("#password").value;
        let repeatPassword = document.querySelector("#repeatPassword").value;
        let username = document.querySelector("#username").value;

        if (username.trim() === "") {
            alert("用户名不能为空")
            return false;
        }

        const chineseRegex = /[\u4e00-\u9fa5]/;
        if (chineseRegex.test(username)) {
            alert("用户名不能包含中文");
            return false;
        }

        if (password !== repeatPassword) {
            alert("两次输入的密码不一致");
            return false;
        }

        const passwordRegex = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,}$/;
        if (!passwordRegex.test(password)) {
            alert("密码长度必须大于8位并且不能为纯英文或纯数字")
            return false;
        }

    }
</script>
</body>
</html>